import React, { Component } from 'react';
import { Link } from 'react-router';

import { Menu, Input, Button, } from 'antd';
import activeProfile from '../Profile';

import './Head.less';


export default class Head extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedKey: [this.props.page],
    };
    console.log('--------------')
    console.log();
    console.log('--------------')
  }

  menuItemClick(e) {
    const { keyPath } = e;
    this.setState({
      selectedKey: keyPath,
    });
  }

  render() {
    const selectedKeys = [this.props.page];
    return (
      <div className="block-head">
        <Link to="/"><img className="logo" src={activeProfile.logo} alt="logo" /></Link>
        <Menu className="menu-left" theme="dark" mode="horizontal" defaultSelectedKeys={selectedKeys} onClick={this.menuItemClick.bind(this)}>

          <Menu.SubMenu key="product" title="产品">
            {
              activeProfile.menu.products.map(function (product, index) {
                return (
                  <Menu.ItemGroup key={'product' + index} title={product.title}>
                    {
                      product.services.map(function (s, i) {
                        return <Menu.Item key={'product-' + index + '-' + i}><Link to={s.url}>{s.label}</Link></Menu.Item>;
                      })
                    }
                  </Menu.ItemGroup>
                )
              })
            }
          </Menu.SubMenu>

          <Menu.SubMenu key="market" className="market-menu" title={<Link to="/market">云市场</Link>}>
            {
              activeProfile.menu.market.map(function (item, index) {
                return (
                  <Menu.ItemGroup key={'market' + index} title={item.title} link={item.url}>
                    {
                      item.services.map(function (s, i) {
                        return <Menu.Item key={'market-' + index + '-' + i}><Link to={s.url}>{s.label}</Link></Menu.Item>;
                      })
                    }
                  </Menu.ItemGroup>
                )
              })
            }
          </Menu.SubMenu>

          <Menu.SubMenu key="solution" title="解决方案" className='solution-menu'>
            {
              activeProfile.menu.solution.map((item, index) => {
                return (
                  <Menu.Item className='solution-item' key={'solution-' + index}>
                    <Link to={item.url}>
                      <div className='solution-item-title'>{item.label}</div>
                      <div className='solution-item-sub'>{item.sub}</div>
                    </Link>
                  </Menu.Item>
                )
              })
            }
          </Menu.SubMenu>
          <Menu.Item key="partner"> <Link to="/partner">合作伙伴</Link></Menu.Item>
          <Menu.Item key="help"><Link to="/help">帮助中心</Link></Menu.Item>
        </Menu>

        <Menu className="menu-right" theme="dark" mode="horizontal">
          <Menu.Item>
            <Input.Search placeholder="请输入关键词" onSearch={value => console.log(value)} />
          </Menu.Item>
          <Menu.Item>English</Menu.Item>
          <Menu.Item>备案</Menu.Item>
          <Menu.Item>注册</Menu.Item>
          <Menu.Item>登录</Menu.Item>
          <Menu.Item>
            <Button ghost>控制台</Button>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}